<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐购-商品折扣券</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/purchase/coupon.min.css?v=<%=$version%>">
</head>
<body style="background: #fff">
<div id="couponInfo" v-cloak>
    <header class="discount-header">
        <span class="goback" @click="getBack()"></span>
        {{name}}
        <span class="discount-spsre"></span>
    </header>
    <div class="couponInfo-slide">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in coupons.imgs">
                    <img :src="item.imgSrc" class="lazy">
                </div>
                <!--<div class="swiper-slide">-->
                <!--<img data-src="/imgs/happyi/index/bpic1.png" class="swiper-lazy">-->
                <!--</div>-->
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="couponInfo-info">
        <div class="info-cent">
            <span class="info-centleft"><span>{{coupons.discount}}</span>折</span>
            <h6>{{coupons.title}}</h6>
            <span class="couponInfo-money">{{coupons.integral}}</span>
            <p>有效期：<span>{{beginTime}}-{{endTime}}</span></p>
        </div>
    </div>
    <div class="collage" v-if="type==2">
        <!--距离结束：{{hours}}:{{minutes}}:{{seconds}}-->
        <div class="collage-cent"><span>2人团</span>每人限购<b>1</b>件</div>
    </div>
    <div class="couponInfo-title">适用商品</div>
    <div class="couponInfo-goods clearfix">
        <strong :style="bgimg(coupons.imgSrc)"></strong>
        <h6>{{coupons.title}}</h6>
        <p>&yen;<span>{{coupons.pintegral}}</span></p>
        <span class="purchase-more2"></span>
    </div>
    <!--<div class="couponInfo-title couponInfo-title1">咨询与售后<span class="purchase-more2"></span></div>-->
    <div class="couponInfo-butt">
        <div>温馨提示：</div>
        <p>1.可在集市溢价出售</p>
        <p>2.本折扣券仅可在本商铺使用</p>
    </div>
    <div class="couponInfo-footer collage-footer" v-if="type==2">
        <!--<span class="goodsDetails-kefu"></span>-->
        <!--<span class="goodsDetails-icon4"></span>-->
        <strong class="footer-btn" @click="getIsScreen(2)">发起拼单</strong>
    </div>
    <div class="couponInfo-footer" v-else>
        应付：<b>{{coupons.integral}}</b>
        <strong class="footer-btn" @click="getIsScreen(2)">立即抢购</strong>
    </div>
    <div id="mask" @click="getIsScreen()" :class="{'maskShow':isScreen}"></div>
    <div id="paymentTips" :class="{'maskShow':isScreen==1}">
        <h6>晚了一小步，商品券已被抢空！</h6>
        <b>我知道了</b>
    </div>
    <div id="confirmPayment" :class="{'maskShow':isScreen==2}">
        <h6 class="confirmPayment-title">
            确认付款<span @click="getIsScreen()"></span>
        </h6>
        <div class="confirmPayment-countegral">
            <strong>{{coupons.integral}}</strong>
        </div>
        <div class="confirmPayment-user clearfix">
            支付用户<strong :style="bgimg(userInfo.headImg)"></strong><span>{{userInfo.name}}</span>
        </div>
        <div class="confirmPayment-balance clearfix">
            账户余额<strong v-if="integral<coupons.integral">余额不足</strong><span>{{integral}}</span>
        </div>
        <div class="confirmPayment-btn" v-if="integral<coupons.integral">去充值</div>
        <div class="confirmPayment-btn1" v-else @click="buyCoupon()">支付</div>
    </div>
    <div id="newTips" :class="{'maskShow':isScreen==3}">
        <p>您需要使用<a>「新人专享资格券」</a></p>
        <p>才能参与抢购！</p>
        <div class="newTips-btn clearfix">
            <span @click="getIsScreen()">取消</span>
            <span class="newTips-btnOK">立刻使用</span>
        </div>
    </div>
    <div id="newTips" :class="{'maskShow':isScreen==4}">
        <p>您没有<a>「新人专享资格券」</a></p>
        <p>无法获得参与抢购机会！</p>
        <div class="newTips-btn clearfix">
            <span @click="getIsScreen()">取消</span>
            <span class="newTips-btnOK" @click="getNext(3)">返回首页</span>
        </div>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/js/purchase/couponInfo.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".couponInfo-slide .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false
        // },
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
</script>
</body>
</html>